import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal, notification} from "antd";
import {hideCreateRate, updateCarrierModel} from "./actions";
import FormEditor from "../../components/FormEditor";


class CreateRateModal extends PureComponent {

    handleCreateRate = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch, clientModel} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const rates = clientModel.rates;
                    const found = rates.find(rate => rate.fromRate === values.fromRate && rate.toRate === values.toRate);
                    if (found) {
                        notification.error({
                            message: '存在此汇率的记录,请勿重复添加'
                        });
                    } else {
                        clientModel.rates.push({...values, "id": Math.random().toString()});
                        dispatch(updateCarrierModel(clientModel));
                        dispatch(hideCreateRate());
                    }
                }
            });
        }
    };
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideCreateRate());
    };

    render() {
        const {loading, visible, model} = this.props;
        const schema = [
            {
                title: '基础信息',
                fields: [
                    {
                        field: 'fromRate',
                        title: '转换前币种',
                        type: 'text',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入转换前币种'}]
                        },
                    }, {
                        field: 'toRate',
                        title: '转换后币种',
                        type: 'text',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入转换后币种'}]
                        },
                    }, {
                        field: 'rate',
                        title: '汇率',
                        type: 'number'
                    }
                ]
            }];

        return (
            <Modal
                title="新增一行汇率"
                visible={visible}
                onOk={this.handleCreateRate}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                okText="添加"
                cancelText="取消"
                width="60%"
            >
                <FormEditor
                    schema={schema}
                    column={3}
                    defaultReadonly={false}
                    showActionBar={false}
                    defaultValues={model}
                    wrappedComponentRef={inst => (this.formEditor = inst)}
                />
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.carrier.createRate,
        clientModel: state.carrier.create.model
    };
};

export default connect(mapStateToProps)(CreateRateModal);
